import $ from 'jquery'

import { getTarget } from '../utils/tools'

export default class Carousel {
    constructor (options) {

        this.autoplay = options.autoplay;
        this.duration = 3000;//options.duration;
       
        this.$carousel = $('.J_carousel');
        this.$carList = this.$carousel.find('.carousel-list');
        this.$carItems = this.$carList.children('.car-item');
        this.$indicatorItems = this.$carousel.find('.indicator-item');

        this.curIdx = 0;
    }

    init() {
        this.autoplay && this.autoPlay();
        this.bindEvent();
    }

    autoPlay () {
        //在setInterval函数内部，this指向不再是指向Carousel这个类而是指向setInterval了，
        //这里使用$.proxy()可以保证内部的this继续指向Carousel
        this.timer = setInterval($.proxy(this.run, this), this.duration);
    }

    bindEvent () {
        this.$carousel.on('mouseover', $.proxy(this.mouseInOut, this));
        this.$carousel.on('mouseout', $.proxy(this.mouseInOut, this));
        this.$carousel.on('click', $.proxy(this.onCarouselClick, this));
    }

    mouseInOut (ev) {
        const e = ev || window.event,
              eventType = e.type;

        //通过e.type能得知是mouseover事件还是mouseout事件
        switch (eventType) {
            case 'mouseover':
                clearInterval(this.timer);
                this.timer = null;
                break;
            case 'mouseout':
                this.autoplay && this.autoPlay();
                break;
            default:
                break;
        }
    }
    onCarouselClick (ev) {
        // const e = ev || window.event,
        //       tar = e.target || e.srcElement,
        //       className = tar.className;
        const tar = getTarget(ev),
              className = tar.className;
               
        if (className === 'indicator-item') {
            this.curIdx = $(tar).index();
            this.setSlider(this.curIdx, '', false);
        }
    }

    run () {
        this.slideAction('next');//从左到右轮播
        //this.slideAction('prev');//从右到左轮播
    }

    slideAction (dir) {
        let t = null;

        switch (dir) {
            case 'next':
                //当curIdx这个下标等于$carItems的长度时，证明超出去了，因为下标是从0开始的
                //if (this.curIdx + 1 == this.$carItems.length) {
                if (this.curIdx == this.$carItems.length - 1) {
                    this.curIdx = 1;
                    this.setSlider(this.curIdx, dir, true);

                    //translate3d必须要有一个延迟时间才能清除，不然会出问题，会清除不了
                    t = setTimeout(() => {
                       this.setSlider(this.curIdx, dir, false);
                       clearTimeout(t) 
                    }, 100);
                } else {
                    this.curIdx++;
                    this.setSlider(this.curIdx, dir, false);
                }
                break;
        
            case 'prev':
                if (this.curIdx === 0) {
                    this.curIdx = this.$carItems.length - 1;
                    this.setSlider(this.curIdx, dir, true);

                    t = setTimeout(() => {
                        this.setSlider(this.curIdx, dir, false);
                        clearTimeout(t)
                    }, 100);
                } else {
                    this.curIdx--;
                    this.setSlider(this.curIdx, dir, false);
                }
                break;
            
            default:
                break;
        }
    }

    setSlider (index, dir, isInitial) {
        //translate3d能开启GPU加速
        this.$carList.css({
            transform: `translate3d(
                ${isInitial 
                    ? 
                    (dir === 'next' ? 0 : -(this.$carItems.length - 1) * 1200) 
                    : 
                    -1200 * index
                }px, 0px, 0px
            )`,
            transitionDuration: `${isInitial ? 'initial' : '.5s'}`
        });

        this.setIndicator(
            (index === this.$carItems.length - 1 || index === 0) 
            ? 0 : index);
    }

    //设置indicator（那三个小圆点）与list图标同步
    setIndicator (index) {
        this.$indicatorItems.eq(index).addClass('current')
                            .siblings('.indicator-item').removeClass('current');
    }
}